<template>
  <div>
      <!-- 顶部 -->
      <mt-header fixed title="买买买">
      </mt-header>
        <div class="go-back" @click="goToBack" v-show="!isShow">&lt;返回</div>

  <!-- body -->
  <router-view></router-view>

  <!-- tabbar -->
  <mt-tabbar v-show="isShow">
  <mt-tab-item id="home">
    <router-link to='/home'>
    <img src="http://img08.jiuxian.com/bill/2016/0224/cccd8df26a754c139de800406af82178.png">
    </router-link>
  </mt-tab-item>
  <mt-tab-item id="category">
    <router-link to='/category'>    
    <img src="http://img07.jiuxian.com/bill/2016/0224/36a49b28ec5e4cdf9dbe37988199487d.png">
    </router-link>
  </mt-tab-item>
  <mt-tab-item id="shopcart">
    <router-link to='/shopcart'>    
    <img src="http://img08.jiuxian.com/bill/2016/0224/42baf46987b6460bb43b3396e9941653.png">
    </router-link>
  </mt-tab-item>
  <mt-tab-item id="mine">
    <router-link to='/mine'>    
    <img src="http://img09.jiuxian.com/bill/2016/0224/cba9029a8f4444a989a2ab5aa84c6538.png">
    </router-link>
  </mt-tab-item>
</mt-tabbar>
  </div>
</template>

<style>
  img{
    width: 42px;
    height: 35px;
  }
  .go-back{
    position: fixed;
    top: 10px;
    left: 10px;
    font-size: 14px;
    color: #fff;
    z-index: 2;
  }
</style>

<script>
  export default{
    data(){
      return {
        isShow:false
      }
    },
    created(){
        this.showHiden(this.$route.path)

    },
    methods:{
      showHiden(path){
        this.isShow = path == '/home'        
      },
      goToBack(){
        this.$router.go(-1)
      }
    },
    watch:{
      '$route': function (val, oldVal) {
        this.showHiden(val.path)
      }
    }
  }
</script>

